<!DOCTYPE html>
<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{common/base}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!-- jQuery 3 -->
    <script th:src="@{~/js/jquery.min.js}" th:inline="javascript" type="text/javascript"></script>
    <!-- jQuery UI 1.11.4 -->
    <script th:src="@{~/js/plugins/jQueryUI/jquery-ui.js}" th:inline="javascript" type="text/javascript"></script>
    <!-- Bootstrap 3.3.7 -->
    <script th:src="@{~/js/plugins/bootstrap/js/bootstrap.min.js}" th:inline="javascript" type="text/javascript"></script>
    <!-- DataTables -->
    <script th:src="@{~/js/plugins/datatables.net/js/jquery.dataTables.min.js}" th:inline="javascript" type="text/javascript"></script>
    <script th:src="@{~/js/plugins/datatables.net-bs/js/dataTables.bootstrap.min.js}" th:inline="javascript" type="text/javascript"></script>
    <!-- zTree-->
    <script th:src="@{~/js/plugins/ztree/jquery.ztree.all.js}" th:inline="javascript" type="text/javascript"></script>
    <!-- select2-->
    <script th:src="@{~/js/plugins/select2/js/select2.js}" th:inline="javascript" type="text/javascript"></script>
    <script th:src="@{~/js/plugins/select2/js/i18n/zh-CN.js}" th:inline="javascript" type="text/javascript"></script>

    <script th:src="@{~/js/biz/dataTables.js}" th:inline="javascript" type="text/javascript"></script>
    <script th:src="@{~/js/biz/select2Util.js}" th:inline="javascript" type="text/javascript"></script>
    <script th:src="@{~/js/biz/catalog.js}" th:inline="javascript" type="text/javascript"></script>
    <script th:src="@{~/js/plugins/ztree/jquery.ztree.all.js}" th:inline="javascript" type="text/javascript"></script>
</head>
<body>
<div layout:fragment="index">
    <!-- 操作事件 -->
    <script type="text/javascript">
        var setting = {
            view: {
                dblClickExpand: false,
                showIcon: false
            },
            callback: {
                onRightClick: OnRightClick
            }
        };
        var zNodes =[];

        function OnRightClick(event, treeId, treeNode) {
            if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
                zTree.cancelSelectedNode();
                showRMenu("root", event.clientX, event.clientY);
            } else if (treeNode && !treeNode.noR) {
                zTree.selectNode(treeNode);
                showRMenu("node", event.clientX, event.clientY);
            }
        }

        function showRMenu(type, x, y) {
            $("#rMenu ul").show();
            if (type=="root") {
                $("#m_del").hide();
                $("#m_check").hide();
                $("#m_unCheck").hide();
            } else {
                $("#m_del").show();
                $("#m_check").show();
                $("#m_unCheck").show();
            }

            y += document.body.scrollTop;
            x += document.body.scrollLeft;
            rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

            $("body").bind("mousedown", onBodyMouseDown);
        }
        function hideRMenu() {
            if (rMenu) rMenu.css({"visibility": "hidden"});
            $("body").unbind("mousedown", onBodyMouseDown);
            $("#newNodeAttr").css({'display':'none'})
        }
        function onBodyMouseDown(event){
            if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
                rMenu.css({"visibility" : "hidden"});
            }
        }
        var addCount = 1;
        function addTreeNode() {
            hideRMenu();
            var newNode = { name:"增加" + (addCount++)};
            if (zTree.getSelectedNodes()[0]) {
                zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
            } else {
                zTree.addNodes(null, newNode);
            }
        }
        function addTreeNodeByCustom() {
            var newNode = {
                nodeId: $("select[name='newNodeName']").val(),
                name: $("select[name='newNodeName']").find("option:selected").text(),
                repetition: $("input[name='newNodeCheck']").is(":checked") ? true : false
            };
            hideRMenu();
            if (zTree.getSelectedNodes()[0]) {
                if (zTree.getSelectedNodes()[0].children && zTree.getSelectedNodes()[0].children.length >= 1) {
                    alert('只能添加一个子节点！');
                    return false;
                }
                zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
            }
        }
        function removeTreeNode() {
            hideRMenu();
            var nodes = zTree.getSelectedNodes();
            if (nodes && nodes.length>0) {
                if (nodes[0].children && nodes[0].children.length > 0) {
                    var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
                    if (confirm(msg)==true){
                        zTree.removeNode(nodes[0]);
                    }
                } else {
                    zTree.removeNode(nodes[0]);
                }
            }
        }
        function resetTree() {
            hideRMenu();
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        }

        var zTree, rMenu;
        function addTree () {
            zNodes = [{
                id:1,
                nodeId: $("select[name='newTreeName']").val(),
                name: $("select[name='newTreeName']").find("option:selected").text(),
                repetition: $("input[name='newTreeCheck']").is(":checked") ? true : false
            }];
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            zTree = $.fn.zTree.getZTreeObj("treeDemo");
            rMenu = $("#rMenu");
            $('#addTreebtn').css({"display":"none"});
            $("#addTree").css({"display":"none"});
            $("#saveTree").css('display', 'block');
        }
        // 遍历树结构，组装需要的数据
        function setNodeData(_nodes) {
            let node = {};
            _nodes.map(
                (_node) =>{
                node.classId = _node.nodeId;
            node.className = _node.name;
            node.multipule = _node.repetition;
            if(_node.children && _node.children.length > 0){
                if(!node.children) node.children = [];
                node.children.push(setNodeData(_node.children));
            }
        }
        );
            return node;
        }
        function saveNodes () {
            var name=prompt("请输入模型名称");
            var nodes = zTree.getNodes();
            console.log(nodes);
            let nodesData = setNodeData(nodes);
            console.log(nodesData);
            $.ajax({
                type: "post",
                url: "api/model/save?name="+name,
                data:JSON.stringify(nodesData),
                contentType: "application/json",
                success: function(msg){
                    alert( "保存成功" );
                }
            });
        }

        $(function () {
            Select2Util.loadCatalog();
        });

    </script>
    <style type="text/css">
        ul.ztree{
            width: 360px;
        }
        div#rMenu {
            position:absolute; visibility:hidden; top:0;
            background-color: #FFF; border: 1px ridge #DFDFDF;
            text-align: left;
            padding: 2px;
        }
        div#rMenu ul{
            margin: 1px;
            padding: 2px;
        }
        div#rMenu ul li{
            margin: 1px 0;
            padding: 0 5px;
            cursor: pointer;
            list-style: none outside none;
            background-color: #DFDFDF;
        }
        div#rMenu #newNodeAttr{
            position: absolute;
            top: 0;
            left: 100%;
            width: 320px;
            border: 1px #999 ridge;
            padding: 6px;
        }
    </style>

    <!-- Content Wrapper. Contains page content -->
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>类目模型管理
                <small></small>
            </h1>
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-body">
                            <button id="addTreebtn" class="btn btn-default" onclick="$('#addTree').toggle()">添加根节点</button>
                            <br>
                            <div id="addTree" style="display: none;" class="box-body">
                                <div class="form-group">
                                    <label  class="col-sm-1 control-label">类目名称</label>
                                    <div class="col-sm-3">
                                        <select class="form-control" style="width: 200px" name="newTreeName">

                                        </select>
                                    </div>
                                    <div class="col-sm-3">
                                        <label class="input-group-addon">是否重复
                                            <input type="checkbox" name="newTreeCheck" value="XXX" /></label>
                                        <span class="form-control" style="visibility:hidden;"></span>
                                    </div>

                                </div>
                                <div class="input-group">
                                    <button type="button" class="btn btn-primary" onclick="addTree();">添加</button>
                                </div>

                            </div>
                            <div class="box box-solid">
                                <div class="box-body">
                                    <ul id="treeDemo" class="ztree"></ul>
                                </div>
                                <div class="box-footer">
                                    <button id="saveTree" class="btn btn-default" onclick="saveNodes();" style="display: none;">保存</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </section>
        <!-- /.content -->
    <!-- zTree 右键菜单 -->
    <div id="rMenu">
        <ul>
            <li id="m_add" onclick="$('#newNodeAttr').toggle();">增加节点</li>
            <li id="m_del" onclick="removeTreeNode();">删除节点</li>
            <!-- li id="m_reset" onclick="resetTree();">恢复zTree</li -->
        </ul>
        <div id="newNodeAttr" class="box box-solid" style="display: none;">
            <div class="box-body">
                <div class="input-group">
                    <span class="input-group-addon">节点名称</span>
                    <select class="form-control" style="width: 200px" name="newNodeName"/>

                    </select>
                </div>
                <div class="input-group">
                    <label class="input-group-addon">是否重复 <input type="checkbox" name="newNodeCheck" value="" /></label>
                    <span class="form-control" style="visibility:hidden;"></span>
                </div>
            </div>
            <div class="box-footer">
                <button class="btn btn-default" onclick="addTreeNodeByCustom()">确定</button>
            </div>
        </div>
    </div>
    </div>
    <!-- /.content-wrapper -->



</body>
</html>